<template>
  <div>
    <BasicTable @register="registerTable">
      <template #toolbar>
        <a-button type="primary" @click="handleCreate"> 新增菜单 </a-button>
      </template>
      <template #action="{ record, column }">
        <TableAction :actions="createActions(record, column)" />
      </template>
    </BasicTable>

    <Modal @register="registerModal" @success="handleSuccess" />
  </div>
</template>
<script lang="ts">
  import { defineComponent } from 'vue';
  import {
    BasicTable,
    useTable,
    BasicColumn,
    FormSchema,
    ActionItem,
    EditRecordRow,
    TableAction,
  } from '/@/components/Table';
  import { listApi, DeleteApi } from '/@/api/set/menu';
  import { listToTree } from '/@/utils/helper/treeHelper';
  import { useModal } from '/@/components/Modal';
  import Modal from './modal.vue';
  import { appStore } from '/@/store/modules/app';

  enum MenuType {
    'M' = '目录',
    'F' = '按钮',
    'C' = '菜单',
  }

  const searchFormSchema: FormSchema[] = [
    {
      field: 'menuName',
      label: '菜单名称',
      component: 'Input',
      colProps: {
        span: 8,
      },
    },
    {
      field: 'visible',
      label: '状态',
      component: 'Select',
      componentProps: {
        options: [
          {
            label: '显示',
            value: '0',
            key: '0',
          },
          {
            label: '隐藏',
            value: '1',
            key: '1',
          },
        ],
      },
      colProps: {
        span: 8,
      },
    },
  ];

  const columns: BasicColumn[] = [
    {
      title: '菜单名称',
      dataIndex: 'menuName',
      align: 'left',
    },
    // {
    //   title: '路由唯一键',
    //   dataIndex: 'menuKey',
    // },
    {
      title: '组件',
      dataIndex: 'component',
    },
    {
      title: '排序',
      dataIndex: 'orderNum',
    },
    {
      title: '按钮类型',
      dataIndex: 'menuType',
      format(value) {
        return MenuType[value];
      },
    },
    {
      title: '链接',
      dataIndex: 'path',
    },
    {
      title: '权限标识',
      dataIndex: 'perms',
    },
    {
      title: '状态',
      dataIndex: 'visible',
      format(value) {
        return value === '0' ? '显示' : '隐藏';
      },
    },
  ];

  export default defineComponent({
    name: 'MenuTable',
    components: {
      BasicTable,
      TableAction,
      Modal,
    },
    setup(_) {
      const [registerModal, { openModal }] = useModal();
      const [registerTable, { reload }] = useTable({
        api: queryList,
        useSearchForm: true,
        formConfig: {
          labelWidth: 120,
          schemas: searchFormSchema,
        },
        beforeFetch(params) {
          params.webType = appStore.getAppType;
        },
        pagination: false,
        columns: columns,
        actionColumn: {
          width: 160,
          title: '操作',
          dataIndex: 'action',
          slots: { customRender: 'action' },
        },
        showIndexColumn: false,
        isTreeTable: true,
        tableSetting: {
          fullScreen: true,
        },
      });

      async function queryList(params) {
        const data = await listApi(params);
        if (data.data) {
          return listToTree(data.data, {
            id: 'menuId',
            pid: 'parentId',
            children: 'parentId',
          });
        }
        return [];
      }

      function createActions(record: EditRecordRow, _: BasicColumn): ActionItem[] {
        return [
          {
            label: '编辑',
            onClick() {
              record.webType = record.webType + '';
              openModal(true, {
                record,
                isUpdate: true,
              });
            },
          },
          {
            label: '新增',
            onClick() {
              openModal(true, {
                isUpdate: false,
              });
            },
          },
          {
            label: '删除',
            color: 'error',
            popConfirm: {
              title: '确定要删除吗！',
              confirm() {
                DeleteApi(record.menuId).then((_) => {
                  reload();
                });
              },
            },
          },
        ];
      }
      function handleCreate() {
        openModal(true, {
          isUpdate: false,
        });
      }

      function handleSuccess() {
        reload();
      }

      return {
        registerTable,
        registerModal,
        createActions,
        handleCreate,
        handleSuccess,
      };
    },
  });
</script>
<style lang="less" scoped></style>
